//安全分类

import { useState, useEffect } from 'react';
import { useLocation } from 'react-router-dom';
import IconFont from '@/components/IconFont';
import { Button, Divider } from 'antd';
import BindVxModal from './BindVxModal';
import classnames from 'classnames';
import styles from './SafetyClassify.module.less';
import { IdCardDesensitization } from '@/utils/utils.jsx';
import { getUserDetailOp, getWxLoginParamsOp } from '../../service';

//银行卡绑定状态
const bankBindStateMap = {
  0: '未绑定',
  1: '部分绑定',
  2: '已绑定',
};

let wxAuthParams = {};

export default ({
  personageMessage,
  accountExtend,
  accountDetail,
  bankBindState,
  userAccountType,
  phoneNumberClick,
  passwordClick,
  payClick,
  authentication,
  cardMessageClick,
}) => {

  const [isOpen, setIsOpen] = useState(false); //是否展开

  const [newUserDetail, setDetail] = useState({});//blade-user 获取

  const [visible, setVisible] = useState(false);

  const { userType } = userAccountType;

  const location = useLocation();

  const renderBindBankBtn = () => {
    return <Button onClick={cardMessageClick}>查看详情</Button>;
  };

  useEffect(()=>{
    getUserDetail();
    getWxAuthParams();
    if(location.search && location.search.includes('unionid')){
      setVisible('bindWx')
    }
  }, [])

  const getUserDetail = async () => {
    const { data, success } = await getUserDetailOp();
    if(success){
      setDetail(data);
    }
  }

  //获取微信授权参数
  const getWxAuthParams = async () => {
    const { data, success } = await getWxLoginParamsOp({ industrialBeltFlag: INDUSTRIAL_BELT_FLAG });
    if(success && data && Object.keys(data)?.length){
      wxAuthParams = data;
    }
  }

  //绑定微信弹窗
  const bindVxModalProps = {
    location,
    wxAuthParams,
    newUserDetail,
    handleOk(){
      getUserDetail();
      setVisible(false);
    },
    handleCancel(){
      setVisible(false);
    }
  }

  //账户管理右侧渲染
  const renderAccountBtn = () => {
    return (
      <div
        onClick={() => {
          setIsOpen(!isOpen);
        }}
        style={{ cursor: 'pointer', textAlign: 'center' }}
      >
        <div className="common-color1">账户详情</div>
        {isOpen ? (
          <IconFont type="iconz045" className={styles.openIcon} />
        ) : (
          <IconFont type="iconzhankai" className={styles.openIcon} />
        )}
      </div>
    );
  };

  //是否认证
  const isAuthentication = () => {
    if (Object.keys(accountExtend).length > 0) {
      //实名认证有数据
      if (accountExtend.accountType == 1) {
        //个人认证
        if (userType == 1) {
          //大用户
          return false;
        } else {
          return true;
        }
      } else {
        //企业认证
        return true;
      }
    } else {
      //实名认证无数据
      return false;
    }
  };

  //展开的账户信息
  const renderAccountInfo = () => {
    return (
      <div className={styles.accoutBox}>
        {Object.keys(accountDetail.qiYe).length > 0 && (
          <div className={styles.accoutBoxItem}>
            <div>企业账户：</div>
            <div>
              <div>
                <span>账户名：</span>
                <span>{accountDetail.qiYe.bankAccountNo}</span>
              </div>
              <div>
                <span>营业执照名称：</span>
                <span>{accountDetail.qiYe.licenseName}</span>
              </div>
              <div>
                <span>社会统一信用代码：</span>
                <span>{accountDetail.qiYe.socialCreditCode}</span>
              </div>
              <div>
                <span>法人姓名：</span>
                <span>{accountDetail.qiYe.userName}</span>
              </div>
              <div>
                <span>身份证号：</span>
                <span>{IdCardDesensitization(accountDetail.qiYe.idCard)}</span>
              </div>
              <div>
                <span>身份证有效期：</span>
                <span>{`${accountDetail.qiYe.issueDate} - ${accountDetail.qiYe.expiryDate}`}</span>
              </div>
              <div>
                <span>交易限额：</span>
                <span>{accountDetail.qiYe.limitAmount}</span>
              </div>
              <div>
                <span>当前余额：</span>
                <span>{accountDetail.qiYe.currentAmount}</span>
              </div>
            </div>
          </div>
        )}
        {Object.keys(accountDetail.geRen).length > 0 && (
          <div className={styles.accoutBoxItem}>
            <div>个人账户：</div>
            <div>
              <div>
                <span>账户名：</span>
                <span>{accountDetail.geRen.bankAccountNo}</span>
              </div>
              <div>
                <span>开户人：</span>
                <span>{accountDetail.geRen.userName}</span>
              </div>
              <div>
                <span>身份证号：</span>
                <span>{IdCardDesensitization(accountDetail.geRen.idCard)}</span>
              </div>
              <div>
                <span>身份证有效期：</span>
                <span>{`${accountDetail.geRen.issueDate} - ${accountDetail.geRen.expiryDate}`}</span>
              </div>
              <div>
                <span>职业： </span>
                <span>{`${accountDetail.geRen?.occupationName} ${
                  accountDetail.geRen.occupation
                    ? `（${accountDetail.geRen.occupation}）`
                    : ''
                }`}</span>
              </div>
              <div>
                <span>常住地址： </span>
                <span>{`${accountDetail.geRen?.provinceName}${accountDetail.geRen?.cityName}${accountDetail.geRen?.countyName}**********`}</span>
              </div>
              <div>
                <span>开户行：</span>
                <span>{accountDetail.geRen.pingAnBankName}</span>
              </div>
              <div>
                <span>交易限额：</span>
                <span>{accountDetail.geRen.limitAmount}</span>
              </div>
              <div>
                <span>充值限额：</span>
                <span>{accountDetail.geRen.rechargeLimitAmount}</span>
              </div>
              <div>
                <span>当前绑卡银行：</span>
                <span>
                  {accountDetail.geRen.openBankName}(
                  {accountDetail.geRen.bankNo
                    ? '****' +
                      accountDetail.geRen.bankNo.substr(
                        accountDetail.geRen.bankNo.length - 4
                      )
                    : ''}
                  )
                </span>
              </div>
              <div>
                <span>当前余额：</span>
                <span>{accountDetail.geRen.currentAmount}</span>
              </div>
            </div>
          </div>
        )}
      </div>
    );
  };

  return (
    <div className={styles.SafetyClassifyBox}>
      {/* 登录密码 */}
      <div className={styles.SafetyClassifyItem}>
        <div className={styles.itemLeft}>
          <IconFont
            type="icondenglu"
            className={classnames(styles.blue, styles.iconSize)}
          />
          <div className={styles.itemStatus}>
            <span>登录密码</span>
            <span>已设置</span>
          </div>
        </div>
        <div className={styles.itemCenter}>
          <span>
            安全性高的密码可以使账号更安全，建议你定期更换密码，且设置一个包含数字和字母，并长度超过6位以上的密码，为保障你的账户安全只有在你绑定邮箱或手机后才能修改
          </span>
        </div>
        <div className={styles.itemRight}>
          <Button type="primary" onClick={passwordClick}>
            修改
          </Button>
        </div>
      </div>
      {/* 手机绑定 */}
      <Divider />
      <div className={styles.SafetyClassifyItem}>
        <div className={styles.itemLeft}>
          <IconFont
            type="iconshouji"
            className={classnames(styles.blue, styles.iconSize)}
          />
          <div className={styles.itemStatus}>
            <span>手机绑定</span>
            <span>已绑定</span>
          </div>
        </div>
        <div className={styles.itemCenter}>
          <span>
            进行手机验证后，可用于进行敏感操作的验证信息，以及进行积分消费的验证确认，非常有助于保护你的账号和账户安全
          </span>
        </div>
        <div className={styles.itemRight}>
          <Button type="primary" onClick={phoneNumberClick}>
            修改
          </Button>
        </div>
      </div>
       {/* 微信绑定 */}
       <Divider />
      <div className={styles.SafetyClassifyItem}>
        <div className={styles.itemLeft}>
          <IconFont type='iconweixin1' className={classnames(styles.blue, styles.iconSize)} />
          <div className={styles.itemStatus}>
            <span>微信绑定</span>
            <span className={newUserDetail.unionid ? '' : 'common-color9'}>{newUserDetail.unionid ? '已' : '未'}绑定</span>
          </div>
        </div>
        <div className={styles.itemCenter}>
          <span>绑定微信后，扫码即可登录，快速便捷</span>
        </div>
        <div className={styles.itemRight}>
          <Button type="primary" onClick={()=>setVisible('bindWx')}>
            {newUserDetail.unionid ? '解绑' : '绑定'}
          </Button>
        </div>
      </div>
      {/* 支付密码 */}
      <Divider />
      <div className={styles.SafetyClassifyItem}>
        <div className={styles.itemLeft}>
          <IconFont
            type="iconzhifumima"
            className={classnames(styles.blue, styles.iconSize)}
          />
          {personageMessage.payPassword == '' ? (
            <div className={styles.itemStatus}>
              <span>支付密码</span>
              <span>未设置</span>
            </div>
          ) : (
            <div className={styles.itemStatus}>
              <span>支付密码</span>
              <span>已设置</span>
            </div>
          )}
        </div>
        <div className={styles.itemCenter}>
          <span>
            进行密码验证后，可用于进行敏感操作的验证信息，以及进行积分消费的验证确认，非常有助于保护你的账号和账户安全
            <span className="common-color9" style={{ fontSize: 12 }}>
              {' '}
              (子账号不允许设置、修改支付密码)
            </span>
          </span>
        </div>
        {personageMessage.payPassword == '' ? (
          <div className={styles.itemRight}>
            <Button type="primary" onClick={payClick}>
              设置
            </Button>
          </div>
        ) : (
          <div className={styles.itemRight}>
            <Button type="primary" onClick={payClick}>
              修改
            </Button>
          </div>
        )}
      </div>
      {/* 实名认证 */}
      <Divider />
      <div className={styles.SafetyClassifyItem}>
        <div className={styles.itemLeft}>
          <IconFont
            type="iconrenzheng1"
            className={classnames(styles.blue, styles.iconSize)}
          />
          {isAuthentication() ? (
            <div className={styles.itemStatus}>
              <span>实名认证</span>
              <span>已认证</span>
            </div>
          ) : (
            <div className={styles.itemStatus}>
              <span>实名认证</span>
              <span className="common-color9">未认证</span>
            </div>
          )}
        </div>
        <div className={styles.itemCenter}>
          <span>实名认证后可以开立专属资金账户，在线交易更安全。</span>
        </div>
        {isAuthentication() ? (
          <div className={styles.itemRight}>
            <Button onClick={() => authentication(false)}>认证详情</Button>
          </div>
        ) : (
          <div className={styles.itemRight}>
            <Button type="primary" onClick={() => authentication(false)}>
              去认证
            </Button>
          </div>
        )}
      </div>
      {isAuthentication() > 0 && (
        <span className={styles.accountExtendText}>
          认证类型：{accountExtend.accountType == '1' ? '个人认证' : '企业认证'}
        </span>
      )}
      {/* 绑定银行卡 */}
      <Divider />
      <div className={styles.SafetyClassifyItem}>
        <div className={styles.itemLeft}>
          <IconFont
            type="iconyinhangka"
            style={{ color: '#0165D5' }}
            className={classnames(styles.blue, styles.iconSize)}
          />
          <div className={styles.itemStatus}>
            <span>银行卡</span>
            <span className={bankBindState == 0 ? 'common-color9' : ''}>
              {bankBindStateMap[bankBindState]}
            </span>
          </div>
        </div>
        <div className={styles.itemCenter}>
          <span>
            为遵循国家的法律规定，支付提现需按绑定银行卡进行提现绑定，您认证的绑定信息我们将严格保密
          </span>
        </div>
        <div className={styles.itemRight}>
          {renderBindBankBtn()}
          {/* <Button onClick={cardMessageClick}>详情</Button> */}
        </div>
      </div>
      {/* 账户管理 */}
      <Divider />
      <div className={styles.SafetyClassifyItem}>
        <div className={styles.itemLeft}>
          <IconFont
            type="iconweibiaoti5"
            style={{ color: '#0165D5' }}
            className={classnames(styles.blue, styles.iconSize)}
          />
          <div className={styles.itemStatus}>
            <span>账户管理</span>
          </div>
        </div>
        <div className={styles.itemCenter}>
          <span>开立专属资金账户，在线交易更安全。</span>
          {isOpen && <div>{renderAccountInfo()}</div>}
        </div>
        <div className={styles.itemRight}>{renderAccountBtn()}</div>
      </div>
      {/* 绑定微信 */}
      { visible == 'bindWx' && <BindVxModal {...bindVxModalProps} />}
    </div>
  );
};
